<template>
  <AvicModal :visible="true" title="编辑" width="550px" height="540px" :centered="true" @cancel="closeModal">
    <a-spin :spinning="loading">
      <a-form ref="formRef" :model="form" :rules="rules" v-bind="layout">
        <a-row :gutter="16">
          <a-col v-bind="colLayout.cols">
            <a-form-item name="portletName" label="名称" has-feedback>
              <a-input v-model:value="form.portletName" :maxlength="100" placeholder="请输入名称" />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="portletCode" label="编码" has-feedback>
              <a-input v-model:value="form.portletCode" :maxlength="100" placeholder="请输入编码" />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="resourceType">
              <template #label>
                <span>
                  应用范围
                  <a-tooltip placement="top">
                    <template #title>
                      <span>
                        系统默认：该配置在系统所有用户下生效，优先级最低。
                        <br />
                        角色定义：该配置仅在当前角色下生效，优先级高于“系统默认”。
                        <br />
                        用户自定义：该配置仅在当前用户下生效，优先级高于“角色定义”。
                      </span>
                    </template>
                    <QuestionCircleOutlined :style="{ color: '#7f787c' }" />
                  </a-tooltip>
                </span>
              </template>
              <a-radio-group
                v-model:value="form.resourceType"
                button-style="solid"
                @change="(e) => handleResourceTypeChange(e.target.value)"
              >
                <a-radio-button value="0">系统默认</a-radio-button>
                <a-radio-button value="1">角色范围</a-radio-button>
                <a-radio-button value="3">用户范围</a-radio-button>
                <a-radio-button value="2">用户自定义</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-if="form.resourceType != '2'" v-bind="colLayout.cols">
            <a-form-item name="isDefault" label="是否默认">
              <a-radio-group v-model:value="form.isDefault" button-style="solid">
                <a-radio value="1">是</a-radio>
                <a-radio value="0">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col v-if="isUser" v-bind="colLayout.cols">
            <a-form-item name="resourceId" :rules="[{ required: true, message: '请选择用户!' }]" label="用户" has-feedback>
              <AvicCommonSelect
                v-model:value="form.resourceId"
                :default-show-value="form.resourceIdAlias"
                :select-model="isUserScope ? 'multi' : 'single'"
                type="userSelect"
                placeholder="请选择用户"
              />
            </a-form-item>
          </a-col>
          <a-col v-if="isRole" v-bind="colLayout.cols">
            <a-form-item name="resourceId" :rules="[{ required: true, message: '请选择角色!' }]" label="角色" has-feedback>
              <AvicCommonSelect
                v-model:value="form.resourceId"
                :default-show-value="form.resourceIdAlias"
                type="roleSelect"
                select-model="multi"
                placeholder="请选择角色"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="orderBy" label="排序" has-feedback>
              <a-input-number
                v-model:value="form.orderBy"
                style="width: 100%"
                :min="0"
                :max="99999999"
                :precision="0"
                :step="1"
                placeholder="请输入排序"
              />
            </a-form-item>
          </a-col>
          <a-col v-bind="colLayout.cols">
            <a-form-item name="memo" label="描述">
              <a-textarea v-model:value="form.memo" :rows="2" placeholder="请输入描述" :maxlength="500" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <template #footer>
      <a-button title="保存" type="primary" :loading="loading" @click="saveForm('')">保存</a-button>
      <a-button title="返回" type="primary" ghost @click="closeModal">返回</a-button>
    </template>
  </AvicModal>
</template>
<script lang="ts" setup>
// 引入表单ts
import { useSysThemesSkinsPortletForm, emits } from './ts/SysThemesSkinsPortletForm';
const props = defineProps({
  formId: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(emits);
const { form, formRef, isUser, isUserScope, isRole, handleResourceTypeChange, rules, layout, colLayout, loading, saveForm, closeModal } =
  useSysThemesSkinsPortletForm({
    props,
    emit
  });
</script>
